
<div class="outbox">
    {{template "header" .}}
    <div class="table-container is-centered" style="margin:0 auto">
        <table class="table" >

        </table>

        <table class="table" >
            <thead>
            <tr>
                <td colspan="100">
             <span>
                <input type="button" onclick="self.location='/create/deployments'" class="button" value="创建" />
             </span>
             <span>
                <input type="button" id="cmdDelDep" class="button" value="删除" />
             </span>
                </td>
                <script>
                    $("#cmdDelDep").click(function(){
                        $(".dep").each(function () {
                            if($(this).prop("checked")){
                                url="/update/deployment?namespace=" + $(this).attr("ns") + "&deployment=" + $(this).attr("dep")
                                $.ajax({
                                    type: "DELETE",
                                    url: url,
                                    dataType: "json",
                                })
                            }
                        })
                    })
                </script>
            </tr>
            <thead>
            <tr>
                <th style="width:50px"></th>
                <th style="width:100px">状态</th>
                <th style="width:35%">名称</th>
                <th style="width:25%">镜像</th>
                <th style="width:10%">Pod副本数</th>
            </tr>
            </thead>
            <tbody id="dep">
                <tr>
                    <td><input class="dep"  ns="${NameSpace}"  dep="${Name}" type="checkbox"/></td>
                    <td> ${Status} </td>
                    <td><a href="/deployments/${Name}">${Name}</a>
                    <p class="is-red">
                        ${Message}
                    </p>
                    </td>
                    <td>${Images}</td>
                    <td class="is-border"> <span  >${Replicas[0]}</span>
                        / <span class="is-green  ">${Replicas[1]}</span>
                        /  <span class=" is-red">${Replicas[2]}</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let orgData=""
        let tmpl=$("#dep").html()
        $("#dep").html("");
        $.template( "deployments", tmpl );
        function loadDeployments() {
            $.ajax({
                type: "POST",
                url: "/core/deployments",
                dataType: "json",
                success: function (data) {
                    if (data.message === "Ok") {
                        let tmpMd5=md5(JSON.stringify(data.result))
                        if(tmpMd5!==orgData) {
                            $("#dep").html("");
                            let deps=data.result;
                            deps.forEach((item)=>{
                                if (item.IsComplete){
                                    item.Status="Active"
                                    item.Message=""
                                }else{
                                    item.Status="Waiting"
                                }
                            })
                            orgData = tmpMd5
                            $.tmpl("deployments", data.result)
                                .appendTo("#dep");
                        }
                    }
                },
                error: function (data) {
                    alert(data.responseJSON.error)
                }
            })
        }
        loadDeployments()
        window.setInterval("loadDeployments()",2000)
    </script>
</div>

{{template "footer" .}}